<template>
  <div>
    <el-row :gutter="9">
      <el-col :md="6">
        <el-card class="content-card mb-2">
          <!-- 操作区域 -->
          <div class="mb-2 w-full">
            <el-button v-permission="'sys:dict:create'" icon="CirclePlus" plain type="primary" @click="handleFormShow(1, 0)">新增</el-button>
            <el-button icon="Refresh" @click="handleSearch">{{ $t('form.reset') }}</el-button>
          </div>
          <!-- 数据信息 -->
          <TreeData :tree-data="treeData" :loading="loading" @node-click="handleNodeClick">
            <template #default="{ data }">
             <span class="custom-tree-node">
               <span class="label line-ellipsis-1">{{ data.name }}</span>
               <span class="code line-ellipsis-1">{{ data.type }}</span>
               <span class="do">
                 <el-button-group>
                   <el-button icon="Edit" v-permission="'sys:dict:update'" type="primary" size="small" @click.stop="handleFormShow(2, data.id)"></el-button>
                   <el-button icon="Delete" v-permission="'sys:dict:delete'" type="danger" size="small" @click.stop="handleDeleteByRow(data)"></el-button>
                 </el-button-group>
               </span>
             </span>
            </template>
          </TreeData>
        </el-card>
      </el-col>

      <el-col :md="18">
        <DictDataList ref="dictDataRef" :id="dictTypeId"/>
      </el-col>
    </el-row>
    <!-- 添加或修改 -->
    <OperateForm ref="formRef" @success="handleSearch"/>
  </div>
</template>

<script lang="tsx" setup>
import { h, nextTick, onBeforeMount, ref } from 'vue';
import useLoading from '@/hooks/use-loading';
import { ElMessageBox, ElNotification } from 'element-plus';
import { sysDictTypeDelete, sysDictTypeTree } from '@/api/api-sys.ts';
import OperateForm from './form.vue';
import DictDataList from './dict-data-index.vue';
import { TreeData } from '@/components/other';

defineOptions({name: 'sys-dict-type'});

onBeforeMount(() => {
  fetchDataList();
});

const [loading, setLoading] = useLoading(false);

const treeData = ref<any[]>([]);
// 数据查询
const fetchDataList = async () => {
  setLoading(true);
  try {
    treeData.value = [];
    const {data} = await sysDictTypeTree({enabled: 1});
    treeData.value = data;
  } catch (err) {
  } finally {
    setLoading(false);
  }
};

// 刷新数据
const handleSearch = () => {
  fetchDataList();
};

/** 添加/修改操作 */
const formRef = ref<any>()
const handleFormShow = (mode: number, id?: number) => {
  formRef.value?.open(mode, id)
};

const handleDeleteByRow = ({id, name}) => {
  ElMessageBox({
    title: '删除确定',
    message: h('p', null, [
      '您确定要删除字典 ',
      h('span', {style: 'font-weight: bold'}, name),
      ' ？',
    ]),
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then((action) => {
    sysDictTypeDelete(id).then(() => {
      ElNotification({title: '成功', message: '删除成功', type: 'success', duration: 2000})
      handleSearch();
    })
  });
};

const dictTypeId = ref<any>();
const dictDataRef = ref<any>()
/** 字典被选中 */
const handleNodeClick = (item: any) => {
  dictTypeId.value = item?.id || 0;
  nextTick(() => dictDataRef.value?.handleSearch());
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  width: 90%;
  height: 100%;
}

.custom-tree-node .label {
  width: 60%;
  display: block;
}

.custom-tree-node .code {
  font-size: 12px;
  color: #999;
  width: 40%;
  text-align: end;
  display: block;
}

.custom-tree-node .do {
  display: none;
}

.custom-tree-node:hover .code {
  display: none;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
